@extends('admin.layout.base')
@section('styles')

@endsection
@section('scripts')
    <script type="text/javascript" src="{{ asset('/js/echarts.min.js') }}"></script>
    <script type="text/javascript" >
        option = {
            title: {
                text: '总收益统计'
            },
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['中标收益','活动收益','商品收益']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            series: [
                {
                    name:'中标收益',
                    type:'line',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'活动收益',
                    type:'line',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name:'商品收益',
                    type:'line',
                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        option1 = {
            title : {
                text: '总支出统计',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            legend: {

                data:['信息费','中标服务费','活动服务费','商品服务费']
            },
            series: [
                {
                    name:'信息费',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },
                {
                    name:'中标服务费',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'活动服务费',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'商品服务费',
                    type:'line',
                    stack: '总量',
                    data:[22, 18, 19, 23, 29, 33, 31, 18, 19, 23, 29, 33]
                },
            ]
        };

        option2 = {
            title: {
                text: '信息费统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['充值','来电消耗','投标消耗','余额'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value',
                name: '金额',
                axisLabel: {
                    formatter: '{value} ,00 元'
                }
            },
            series: [
                {
                    name:'充值',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'来电消耗',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                    name:'投标消耗',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },
                {
                    name:'余额',
                    type:'line',
                    stack: '总量',
                    data:[20, 82, 91, 34, 90, 30, 10, 20, 54, 90, 30, 10]
                },
            ]
        };

        option3 = {
            title : {
                text: '商机来电统计',
                // subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            legend: {

                data:['浏览量','来电量','来电成交量','来电转化率']
            },
            series: [
                {
                    name:'浏览量',
                    type:'line',
                    stack: '总量',
                    data:[200, 320, 510, 634, 790, 1010, 1210,1301, 1434,1590, 1830, 2110]
                },
                {
                    name:'来电量',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'来电成交量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'来电转化率',
                    type:'line',
                    stack: '总量',
                    data:[22, 18, 19, 23, 29, 33, 31, 18, 19, 23, 29, 33]
                },
            ]
        };

        option4 = {
            title : {
                text: '投标权益统计',
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                data: ['需求总量','投标成交次数','投标转化率']
            },
            series : [
                {
                    name:'需求总量',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
                },
                {
                    name:'投标成交次数',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
                },
                {
                    name:'投标转化率',
                    type:'line',
                    stack: '总量',
                    data:[22, 18, 19, 23, 29, 33, 31, 18, 19, 23, 29, 33]
                },
            ]
        };

        option5 = {
            title: {
                text: '订单介绍统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['订单介绍总量','订单介绍成交次数','订单介绍转化率'],
                top:"6%",//与上方的距离 可百分比% 可像素px
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'订单介绍总量',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
                },
                {
                    name:'订单介绍成交次数',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                    name:'订单介绍转化率',
                    type:'line',
                    stack: '总量',
                    data:[15, 23, 20, 15, 19, 33, 41, 33, 31, 20, 14, 19]
                },

            ]
        };

        $(function () {
            var myChart = echarts.init(document.getElementById("contain"));
            myChart.setOption(option);
            myChart = echarts.init(document.getElementById("contain1"));
            myChart.setOption(option1);
            myChart = echarts.init(document.getElementById("contain2"));
            myChart.setOption(option2);
            myChart6 = echarts.init(document.getElementById("contain3"));
            myChart6.setOption(option3);
            myChart = echarts.init(document.getElementById("contain4"));
            myChart.setOption(option4);
            myChart = echarts.init(document.getElementById("contain5"));
            myChart.setOption(option5);

            // var myChart7 = echarts.init(document.getElementById("contain7"));
            // myChart7.setOption(option7);
        });

    </script>
    <script>
        function countUp(count,element){
            let divBy = 100,
                speed = Math.round(count / divBy),
                $display = $(element),
                runCount = 1,
                intSpeed = 24;
            let int = setInterval(function() {
                if(runCount < divBy){
                    $display.text(speed * runCount);
                    runCount++;
                } else if(parseInt($display.text()) < count) {
                    let currCount = parseInt($display.text()) + 1;
                    $display.text(currCount);
                } else {
                    clearInterval(int);
                }
            }, intSpeed);
        }
        $(function () {
            countUp(3456,'.count1');
            countUp(399,'.count2');
            countUp(1234,'.count3');
        });
        let app = new Vue({
            el: '#app',
            data: function() {
                return {

                }
            },
            created(){

            },
            methods: {

            }
        });
    </script>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-home">
            <div class="panel-header">
                <div class="panel-title">
                   XXX供应商统计
                </div>
            </div>

            <div class="panel-header">
                <div class="panel-title">
                    整体经营概况
                </div>
            </div>

            <div class="panel-main home-count">
                <div style="width: 100%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain"></div></div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain1"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain2"></div></div>
            </div>
            <div class="panel-header">
                <div class="panel-title">
                    整体流量/转化情况
                </div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain3"></div></div>
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain4"></div></div>
            </div>
            <div class="panel-main home-count">
                <div style="width: 50%;height: 400px"><div class="contain" style="width: 100%;height: 100%" id="contain5"></div></div>
            </div>

            <div class="panel-header">
                <div class="panel-title">
                    店铺实时概况
                </div>
            </div>

            <div class="panel-main home-realtime">
                <div class="realtime-item new-realtime">
                    <div class="card-icon"><div><i class="fa fa-hand-pointer-o"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">浏览量</div>
                        <div class="card-number">266</div>
                        <div class="card-description">昨日：238</div>
                    </div>
                </div>
                <div class="realtime-item good-realtime">
                    <div class="card-icon"><div><i class="fa fa-volume-control-phone"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">来电量</div>
                        <div class="card-number">66</div>
                        <div class="card-description">昨日：74</div>
                    </div>
                </div>
                <div class="realtime-item user-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">信息费充值</div>
                        <div class="card-number">122</div>
                        <div class="card-description">昨日：12</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">信息费余额</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">来电信息费消耗</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>

            </div>

            <div class="panel-main home-realtime">

                <div class="realtime-item good-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">投标信息费消耗</div>
                        <div class="card-number">66</div>
                        <div class="card-description">昨日：74</div>
                    </div>
                </div>
                <div class="realtime-item user-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">中标收益</div>
                        <div class="card-number">122</div>
                        <div class="card-description">昨日：12</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">活动收益</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
                <div class="realtime-item order-realtime">
                    <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                    <div class="card-body">
                        <div class="card-header">商品收益</div>
                        <div class="card-number">166</div>
                        <div class="card-description">昨日：76</div>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection
